<template>
	<!-- 商品分类导航 -->
	<div class="type-nav">
		<div class="container">
			<h1 class="all">全部分类</h1>
			<div class="sort">
				<!-- 一级分类 -->
				<div class="all-sort-list1" @click="go">
					<div class="item bo">
						<!-- 一级标题 -->
						<h3>
							<img src="../../../public/images/ia_300000000.png" alt="" />
							<span class="firstTitle">美食</span>
							<span class="iconfont icon-arrow-right"></span>
						</h3>
						<div class="item-list clearfix">
							<div class="subitem">
								<dl class="fore">
									<!-- 二级分类 -->
									<dt>
										<span class="title-two" href="">美食</span>
										<span class="moreItem">
											<span class="more">更多</span>
											<span class="iconfont icon-arrow-right"></span>
										</span>
									</dt>
									<!-- 三级分类 -->
									<dd>
										<em>
											<span href="">代金券</span>
										</em>
										<em>
											<span href="">甜点</span>
										</em>
										<em>
											<span href="">饮品</span>
										</em>
										<em>
											<span href="">火锅</span>
										</em>
										<em>
											<span href="">自助餐</span>
										</em>
										<em>
											<span href="">小吃快餐</span>
										</em>
										<em>
											<span href="">日韩料理</span>
										</em>
									</dd>
								</dl>
							</div>
						</div>
					</div>
					<div class="item bo">
						<!-- 一级标题 -->
						<h3>
							<img src="../../../public/images/ia_300000001.png" alt="" />
							<span class="firstTitle">外卖</span>
							<span class="iconfont icon-arrow-right"></span>
						</h3>
						<div class="item-list clearfix">
							<div class="subitem">
								<dl class="fore">
									<!-- 二级分类 -->
									<dt>
										<span class="title-two" href="">外卖</span>
										<span class="moreItem">
											<span class="more">更多</span>
											<span class="iconfont icon-arrow-right"></span>
										</span>
									</dt>
									<!-- 三级分类 -->
									<dd>
										<em>
											<span href="">美团外卖</span>
										</em>
									</dd>
								</dl>
							</div>
						</div>
					</div>
					<div class="item bo">
						<!-- 一级标题 -->
						<h3>
							<img src="../../../public/images/ia_300000002.png" alt="" />
							<span class="firstTitle">酒店</span>
							<span class="iconfont icon-arrow-right"></span>
						</h3>
						<div class="item-list clearfix">
							<div class="subitem">
								<dl class="fore">
									<!-- 二级分类 -->
									<dt>
										<span class="title-two" href="">酒店</span>
										<span class="moreItem">
											<span class="more">更多</span>
											<span class="iconfont icon-arrow-right"></span>
										</span>
									</dt>
									<!-- 三级分类 -->
									<dd>
										<em>
											<span href="">经济型舒适/</span>
										</em>
										<em>
											<span href="">三星高档/</span>
										</em>
										<em>
											<span href="">四星豪华/</span>
										</em>
										<em>
											<span href="">五星</span>
										</em>
									</dd>
								</dl>
							</div>
						</div>
					</div>
					<div class="item bo">
						<!-- 一级标题 -->
						<h3>
							<img src="../../../public/images/ia_300000003.png" alt="" />
							<span class="firstTitle">民宿</span>
							<span class="iconfont icon-arrow-right"></span>
						</h3>
						<div class="item-list clearfix">
							<div class="subitem">
								<dl class="fore">
									<!-- 二级分类 -->
									<dt>
										<span class="title-two" href="">热门城市</span>
										<span class="moreItem">
											<span class="more">更多</span>
											<span class="iconfont icon-arrow-right"></span>
										</span>
									</dt>
									<!-- 三级分类 -->
									<dd>
										<em>
											<span href="">上海</span>
										</em>
										<em>
											<span href="">成都</span>
										</em>
										<em>
											<span href="">北京</span>
										</em>
										<em>
											<span href="">重庆</span>
										</em>
									</dd>
								</dl>
								<dl class="fore">
									<!-- 二级分类 -->
									<dt>
										<span class="title-two" href="">热门城市</span>
										<span class="moreItem">
											<span class="more">更多</span>
											<span class="iconfont icon-arrow-right"></span>
										</span>
									</dt>
									<!-- 三级分类 -->
									<dd>
										<em>
											<span href="">上海</span>
										</em>
										<em>
											<span href="">成都</span>
										</em>
										<em>
											<span href="">北京</span>
										</em>
										<em>
											<span href="">重庆</span>
										</em>
									</dd>
								</dl>
							</div>
						</div>
					</div>
					<div class="item bo">
						<!-- 一级标题 -->
						<h3>
							<img src="../../../public/images/ia_300000004.png" alt="" />
							<span class="firstTitle">猫眼电影</span>
							<span class="iconfont icon-arrow-right"></span>
						</h3>
						<div class="item-list clearfix">
							<div class="subitem">
								<dl class="fore">
									<!-- 二级分类 -->
									<dt>
										<span class="title-two" href="">热映电影</span>
										<span class="moreItem">
											<span class="more">更多</span>
											<span class="iconfont icon-arrow-right"></span>
										</span>
									</dt>
									<!-- 三级分类 -->
									<dd>
										<em>
											<span href="">反贪风暴5:最终章</span>
										</em>
										<em>
											<span href="">穿过寒冬拥抱你</span>
										</em>
										<em>
											<span href="">爱情神话</span>
										</em>
										<em>
											<span href="">以年为单位的恋爱</span>
										</em>
										<em>
											<span href=""> 李茂扮太子</span>
										</em>
										<em>
											<span href="">误杀2</span>
										</em>
										<em>
											<span href="">扬名立万</span>
										</em>
										<em>
											<span href="">带你去见我妈</span>
										</em>
										<em>
											<span href="">雄狮少年</span>
										</em>
										<em>
											<span href="">最初的梦想</span>
										</em>
									</dd>
								</dl>
								<dl class="fore">
									<!-- 二级分类 -->
									<dt>
										<span class="title-two" href="">热映电影</span>
										<span class="moreItem">
											<span class="more">更多</span>
											<span class="iconfont icon-arrow-right"></span>
										</span>
									</dt>
									<!-- 三级分类 -->
									<dd>
										<em>
											<span href="">反贪风暴5:最终章</span>
										</em>
										<em>
											<span href="">穿过寒冬拥抱你</span>
										</em>
										<em>
											<span href="">爱情神话</span>
										</em>
										<em>
											<span href="">以年为单位的恋爱</span>
										</em>
										<em>
											<span href=""> 李茂扮太子</span>
										</em>
										<em>
											<span href="">误杀2</span>
										</em>
										<em>
											<span href="">扬名立万</span>
										</em>
										<em>
											<span href="">带你去见我妈</span>
										</em>
										<em>
											<span href="">雄狮少年</span>
										</em>
										<em>
											<span href="">最初的梦想</span>
										</em>
									</dd>
								</dl>
							</div>
						</div>
					</div>
					<div class="item bo">
						<!-- 一级标题 -->
						<h3>
							<img src="../../../public/images/ia_300000000.png" alt="" />
							<span class="firstTitle">机票 / 火车票</span>
							<span class="iconfont icon-arrow-right"></span>
						</h3>
						<div class="item-list clearfix">
							<div class="subitem">
								<dl class="fore">
									<!-- 二级分类 -->
									<dt>
										<span class="title-two" href="">美食</span>
										<span class="moreItem">
											<span class="more">更多</span>
											<span class="iconfont icon-arrow-right"></span>
										</span>
									</dt>
									<!-- 三级分类 -->
									<dd>
										<em>
											<span href="">代金券</span>
										</em>
										<em>
											<span href="">甜点</span>
										</em>
										<em>
											<span href="">饮品</span>
										</em>
										<em>
											<span href="">火锅</span>
										</em>
										<em>
											<span href="">自助餐</span>
										</em>
										<em>
											<span href="">小吃快餐</span>
										</em>
										<em>
											<span href="">日韩料理</span>
										</em>
									</dd>
								</dl>
							</div>
						</div>
					</div>
					<div class="item bo">
						<!-- 一级标题 -->
						<h3>
							<img src="../../../public/images/ia_300000001.png" alt="" />
							<span class="firstTitle">休闲 / 娱乐 / KTV</span>
							<span class="iconfont icon-arrow-right"></span>
						</h3>
						<div class="item-list clearfix">
							<div class="subitem">
								<dl class="fore">
									<!-- 二级分类 -->
									<dt>
										<span class="title-two" href="">外卖</span>
										<span class="moreItem">
											<span class="more">更多</span>
											<span class="iconfont icon-arrow-right"></span>
										</span>
									</dt>
									<!-- 三级分类 -->
									<dd>
										<em>
											<span href="">美团外卖</span>
										</em>
									</dd>
								</dl>
							</div>
						</div>
					</div>
					<div class="item bo">
						<!-- 一级标题 -->
						<h3>
							<img src="../../../public/images/ia_300000002.png" alt="" />
							<span class="firstTitle">生活服务</span>
							<span class="iconfont icon-arrow-right"></span>
						</h3>
						<div class="item-list clearfix">
							<div class="subitem">
								<dl class="fore">
									<!-- 二级分类 -->
									<dt>
										<span class="title-two" href="">酒店</span>
										<span class="moreItem">
											<span class="more">更多</span>
											<span class="iconfont icon-arrow-right"></span>
										</span>
									</dt>
									<!-- 三级分类 -->
									<dd>
										<em>
											<span href="">经济型舒适/</span>
										</em>
										<em>
											<span href="">三星高档/</span>
										</em>
										<em>
											<span href="">四星豪华/</span>
										</em>
										<em>
											<span href="">五星</span>
										</em>
									</dd>
								</dl>
							</div>
						</div>
					</div>
					<div class="item bo">
						<!-- 一级标题 -->
						<h3>
							<img src="../../../public/images/ia_300000003.png" alt="" />
							<span class="firstTitle">丽人 / 美发 / 医学美容</span>
							<span class="iconfont icon-arrow-right"></span>
						</h3>
						<div class="item-list clearfix">
							<div class="subitem">
								<dl class="fore">
									<!-- 二级分类 -->
									<dt>
										<span class="title-two" href="">热门城市</span>
										<span class="moreItem">
											<span class="more">更多</span>
											<span class="iconfont icon-arrow-right"></span>
										</span>
									</dt>
									<!-- 三级分类 -->
									<dd>
										<em>
											<span href="">上海</span>
										</em>
										<em>
											<span href="">成都</span>
										</em>
										<em>
											<span href="">北京</span>
										</em>
										<em>
											<span href="">重庆</span>
										</em>
									</dd>
								</dl>
								<dl class="fore">
									<!-- 二级分类 -->
									<dt>
										<span class="title-two" href="">热门城市</span>
										<span class="moreItem">
											<span class="more">更多</span>
											<span class="iconfont icon-arrow-right"></span>
										</span>
									</dt>
									<!-- 三级分类 -->
									<dd>
										<em>
											<span href="">上海</span>
										</em>
										<em>
											<span href="">成都</span>
										</em>
										<em>
											<span href="">北京</span>
										</em>
										<em>
											<span href="">重庆</span>
										</em>
									</dd>
								</dl>
							</div>
						</div>
					</div>
					<div class="item bo">
						<!-- 一级标题 -->
						<h3>
							<img src="../../../public/images/ia_300000004.png" alt="" />
							<span class="firstTitle">结婚 / 婚纱摄影 / 婚宴</span>
							<span class="iconfont icon-arrow-right"></span>
						</h3>
						<div class="item-list clearfix">
							<div class="subitem">
								<dl class="fore">
									<!-- 二级分类 -->
									<dt>
										<span class="title-two" href="">热映电影</span>
										<span class="moreItem">
											<span class="more">更多</span>
											<span class="iconfont icon-arrow-right"></span>
										</span>
									</dt>
									<!-- 三级分类 -->
									<dd>
										<em>
											<span href="">反贪风暴5:最终章</span>
										</em>
										<em>
											<span href="">穿过寒冬拥抱你</span>
										</em>
										<em>
											<span href="">爱情神话</span>
										</em>
										<em>
											<span href="">以年为单位的恋爱</span>
										</em>
										<em>
											<span href=""> 李茂扮太子</span>
										</em>
										<em>
											<span href="">误杀2</span>
										</em>
										<em>
											<span href="">扬名立万</span>
										</em>
										<em>
											<span href="">带你去见我妈</span>
										</em>
										<em>
											<span href="">雄狮少年</span>
										</em>
										<em>
											<span href="">最初的梦想</span>
										</em>
									</dd>
								</dl>
								<dl class="fore">
									<!-- 二级分类 -->
									<dt>
										<span class="title-two" href="">热映电影</span>
										<span class="moreItem">
											<span class="more">更多</span>
											<span class="iconfont icon-arrow-right"></span>
										</span>
									</dt>
									<!-- 三级分类 -->
									<dd>
										<em>
											<span href="">反贪风暴5:最终章</span>
										</em>
										<em>
											<span href="">穿过寒冬拥抱你</span>
										</em>
										<em>
											<span href="">爱情神话</span>
										</em>
										<em>
											<span href="">以年为单位的恋爱</span>
										</em>
										<em>
											<span href=""> 李茂扮太子</span>
										</em>
										<em>
											<span href="">误杀2</span>
										</em>
										<em>
											<span href="">扬名立万</span>
										</em>
										<em>
											<span href="">带你去见我妈</span>
										</em>
										<em>
											<span href="">雄狮少年</span>
										</em>
										<em>
											<span href="">最初的梦想</span>
										</em>
									</dd>
								</dl>
							</div>
						</div>
					</div>
					<div class="item bo">
						<!-- 一级标题 -->
						<h3>
							<img src="../../../public/images/ia_300000000.png" alt="" />
							<span class="firstTitle">亲子 / 儿童乐园 / 幼教</span>
							<span class="iconfont icon-arrow-right"></span>
						</h3>
						<div class="item-list clearfix">
							<div class="subitem">
								<dl class="fore">
									<!-- 二级分类 -->
									<dt>
										<span class="title-two" href="">美食</span>
										<span class="moreItem">
											<span class="more">更多</span>
											<span class="iconfont icon-arrow-right"></span>
										</span>
									</dt>
									<!-- 三级分类 -->
									<dd>
										<em>
											<span href="">代金券</span>
										</em>
										<em>
											<span href="">甜点</span>
										</em>
										<em>
											<span href="">饮品</span>
										</em>
										<em>
											<span href="">火锅</span>
										</em>
										<em>
											<span href="">自助餐</span>
										</em>
										<em>
											<span href="">小吃快餐</span>
										</em>
										<em>
											<span href="">日韩料理</span>
										</em>
									</dd>
								</dl>
							</div>
						</div>
					</div>
					<div class="item bo">
						<!-- 一级标题 -->
						<h3>
							<img src="../../../public/images/ia_300000001.png" alt="" />
							<span class="firstTitle">运动健身 / 健身中心</span>
							<span class="iconfont icon-arrow-right"></span>
						</h3>
						<div class="item-list clearfix">
							<div class="subitem">
								<dl class="fore">
									<!-- 二级分类 -->
									<dt>
										<span class="title-two" href="">外卖</span>
										<span class="moreItem">
											<span class="more">更多</span>
											<span class="iconfont icon-arrow-right"></span>
										</span>
									</dt>
									<!-- 三级分类 -->
									<dd>
										<em>
											<span href="">美团外卖</span>
										</em>
									</dd>
								</dl>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "TypeNav",
};
</script>
<script setup>
import router from "../../router";
const go = (e) => {
	// console.log(e.target);
	router.push("/foodinfolist");
};
</script>
<style lang="less" scoped>
.type-nav {
	position: relative;
	top: -20px;
  cursor: pointer;

	.container {
		width: 210px;
		height: 488px;
		margin: -43px 0 auto;
		position: relative;
		border: 1px solid #ccc;

		.all {
			width: 208px;
			height: 50px;
			background-color: #fff;
			line-height: 50px;
			padding-left: 15px;
			color: #222;
			font-size: 16px;
			font-weight: bold;
		}

		.nav {
			a {
				height: 45px;
				margin: 0 22px;
				line-height: 45px;
				font-size: 16px;
				color: #333;
			}
		}

		.sort {
			position: absolute;
			left: 0;
			top: 45px;
			width: 208px;
			height: 440px;
			padding-top: 10px;
			position: absolute;
			background: #fff;
			z-index: 999;

			.all-sort-list1 {
				.item {
					h3 {
						line-height: 30px;
						font-size: 13px;
						font-weight: 400;
						overflow: hidden;
						padding: 2px 12px;
						margin: 0;
						position: relative;
						display: flex;
						align-items: center;
						img {
							width: 20px;
							height: 20px;
							margin-right: 10px;
						}

						.firstTitle {
							color: #333;
						}
						.iconfont {
							font-size: 12px;
							margin: 10px 10px;
							position: absolute;
							top: -7px;
							right: 0;
						}
					}
					& h3:hover {
						background-color: #fff7eb;
					}

					.item-list {
						// 开始时，是隐藏的
						display: none;
						position: absolute;
						width: 500px;
						min-height: 460px;
						_height: 200px;
						background: #fff;
						left: 210px;
						border: 1px solid #ddd;
						top: 0;
						z-index: 9999 !important;

						.subitem {
							width: 500px;
							padding: 0 4px 0 8px;

							dl {
								width: 460px;
								// border: 1px solid black;
								padding: 10px;
								overflow: hidden;
								zoom: 1;

								dt {
									width: 440px;
									height: 30px;
									// border: 1px solid blue;
									line-height: 30px;
									border-bottom: 1px solid #ccc;
									font-weight: 700;
									position: relative;
									.title-two {
										font-size: 16px;
										color: #333;
										margin-left: 10px;
									}
									.moreItem {
										width: 50px;
										height: 28px;
										line-height: 28px;
										position: absolute;
										right: 20px;

										.iconfont {
											font-size: 12px;
											margin: 10px 10px;
											position: absolute;
											top: -9px;
											right: 0;
										}
									}
								}

								dd {
									float: left;
									width: 440px;
									height: 30px;
									// border: 1px solid red;
									// 三级列表 超出隐藏
									overflow: hidden;
									padding-bottom: 10px;

									em {
										height: 14px;
										line-height: 14px;
										padding: 0 8px;
										margin-top: 5px;
									}
								}
							}
						}
					}

					&:hover {
						.item-list {
							display: block;
						}
					}
				}
			}
		}
	}
}
</style>
